<template>
    <div class="bg">
        <div class="login">
            <!-- logo区域 -->
            <div class="logo">
                <img :src="Logo" style="width: 70px;height: 70px;" alt="">
                <h1 class="ml">动力港能源管理系统</h1>
            </div>
            <!-- 表单区域 -->
            <div>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username"  placeholder="请输入的账号" prefix-icon="User"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" placeholder="请输入的密码" prefix-icon="Lock"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width: 100%;" type="primary" @click="submitLogin">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>



<script setup lang="ts">
import Logo from '@/assets/logo.png'
import {ref,reactive} from 'vue'
import {useUserStore} from '@/store/auth'
import {useRouter} from 'vue-router'
import{ type FormInstance,type FormRules } from 'element-plus'

// 用户的状态管理
const UserStore = useUserStore()
const router = useRouter()
interface RuleForm{
    username:string,
    password:string
}
const ruleForm = reactive<RuleForm>({
    username:'',
    password:''
})

const rules = reactive<FormRules<RuleForm>>({
    username:[
        {required:true,message:'账号不能为空',trigger:'blur'}
    ],
    password:[
        {required:true,message:"密码不能为空",trigger:'blur'}
    ]
})
const ruleFormRef = ref<FormInstance>()

// 进行登录操作
const submitLogin = ()=>{
    ruleFormRef.value?.validate(async(valid:boolean)=>{
        if(valid){
            console.log('校验成功')
            await UserStore.Login(ruleForm)
            router.push('/')
        }
    })
}

</script>


<style lang="less" scoped>
.bg {
    background-image: url('../assets/bg.png');
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    .login {
        width: 500px;
        height: 300px;
        box-shadow: 0 0 10px 10px #f4f4f4;
        position: absolute;
        top: 50%;
        left: 10%;
        padding: 50px;
        margin-top: -200px;
        text-align: center;
        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            h1 {
                color: #0e3594;
            }
            margin-bottom: 30px;
        }

    }
}
</style>